{extend name="common/base" /}
{block name="title"}添加商品图片{/block}
{block name="main"}
<script src="/ad/js/g_add/g_add_tu.js"></script>
     <!-- Navigation -->
	   <div id="page-wrapper">
        <div class="col-md-12 graphs">
		<div class="xs">
  	    <h3>添加商品图片</h3>
        <div class="well1 white" style="float: left;">
        <h5 ><a href="{:url('/admin/Goods/g_list')}"><span class="label label-success">返回列表</span></a></h5>
        {notempty name="res['goods_id']"}
          <h5 ><a href="{:url('/admin/Goods/g_add',array('goods_id'=>$res['goods_id']))}"><span class="label label-success">基本参数</span></a></h5>
          <h5 ><a href="{:url('/admin/Goods/g_add_details',array('id'=>$res['goods_id']))}"><span class="label label-success">商品详情</span></a></h5>
          <h5 ><a href="{:url('/admin/Goods/g_add_tu',array('id'=>$res['goods_id']))}"><span class="label label-success">商品图片</span></a></h5>
        {/notempty}
        </div>
  	    <div class="well1 white">
        <form class="form-floating" id="g_add_tu" novalidate="novalidate" ng-submit="submit()" action="{:url('Goods/dog_add_tu')}" method ='post' enctype="multipart/form-data">
          <fieldset>
			<div class="form-group">
              <label class="control-label">商品图片</label>
              <input  type="file" ng-model="model.file" required="" id="exampleInputFile" multiple>
              <input type="hidden" name="goods_id" value="{$res['goods_id']}">
			<!-- 显示图片的地方 -->
			<div id="destination" style="margin-top:10px;">
          <img src="{$res['goods_image1']?$res['goods_image1']:''}" style="width:100px;">
          <img src="{$res['goods_image2']?$res['goods_image2']:''}" style="width:100px;">
          <img src="{$res['goods_image3']?$res['goods_image3']:''}" style="width:100px;">
          <img src="{$res['goods_image4']?$res['goods_image4']:''}" style="width:100px;">
      </div>
      <p><span style="color:red;">*&nbsp;&nbsp;</span>请上传不多于3张图片</p>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-primary">提交</button>
              <button type="reset" class="btn btn-default">重置</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>

	    <script type="text/javascript">
			document.getElementById('exampleInputFile').addEventListener('change', function() {
				var file;
				var destination = document.getElementById('destination');
				destination.innerHTML = '';

				// 循环用户多选的文件
				for(var x = 0, xlen = this.files.length; x < xlen; x++) {
                        file = this.files[x];
                    if(file.type.indexOf('image') != -1) { // 非常简单的交验
                        var goods_image = [x];
                        var reader = new FileReader();

                        var i = 2
                        reader.onload = function(e) {
                            var img = new Image();
                            var input = document.createElement("input");
                            input.type = 'hidden';
                            input.value = e.target.result;
                            input.name = 'goods_image'+i;
                            img.src = e.target.result; // 显示图片的地方
                            img.width = 100;
                            destination.appendChild(img);
                            destination.appendChild(input);
                            i++;
                        };

						reader.readAsDataURL(file);
					}
				}
			});
		</script>


		{/block}



